import React, { useEffect,useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import '../component/Edit.css'
import axios from 'axios'
import { Cell, Popup,  } from 'react-vant'
import { Space } from 'react-vant'
import { DeleteO } from '@react-vant/icons'
// import { Popup, Space, Button } from 'antd-mobile'

export default function Edit(){
    const [ SearchParams ] = useSearchParams()
    const name = SearchParams.get('name')
    const [foodCate,setFoodCate] = useState([])
    const [foodList,setFoodList] = useState([])
    console.log(name)
    const foodNum = foodList.reduce((a,b)=>a+b.num,0)
    const foodPrice = foodList.reduce((a,b)=>a+b.num*b.price,0)
    // const [cc,setCC] = useState('')
    let cc = ''
    // console.log(cc);
    const [state, setState] = useState('')
    const onClose = () => setState('')
    // const foodCount = foodList.reduce((a,b)=>a+b.name,0)

    const getFoodCate = async() => {
        let {data:{code,foodcate}} = await axios.get('/foodcate')
        if(code == 200){
            setFoodCate(foodcate)
        }
    }

    const getFoodList = async() => {
        let {data:{code,foodlist}} =await axios.get('/foodlist',{params:{foodcate:cc}})
        if(code === 200){
            setFoodList(foodlist)
        }
    }

    const jian = async(_id,num) => {
        let obj={_id:_id,num:num-1}
        let {data:{code}}=await axios.post('/change',obj)
        if(code === 200){
            getFoodList()
        }
    }

    const jia = async(_id,num) => {
        let obj={_id:_id,num:num+1}
        let {data:{code}}=await axios.post('/change',obj)
        if(code === 200){
            getFoodList()
        }
    }

    useEffect(()=>{
        getFoodCate()
        getFoodList()
    },[])

    return(
        <div>
            <div className='topNameBox'>{name}</div>
            <div className='middleLeftBox'>
                {
                    foodCate.map((item)=>{
                        return <button key={item._id} value={item._id} onClick={(i)=>{cc=i.target.value
                            getFoodList()
                        }}
                        >{item.name}</button>
                    })
                }
            </div>
            <div className='middleRightBox'>
                {
                    foodList.map((item)=>{
                        return <div key={item._id} className='foodListBox'>
                            <div><img src={item.img} width={80} height={80}></img></div>
                            <div>
                                <p>{item.name}</p>
                                <p className='price'>￥{item.price}</p>
                                <div className='numBox'>
                                    <button onClick={()=>jian(item._id,item.num)}>-</button>
                                    <button>{item.num}</button>
                                    <button onClick={()=>jia(item._id,item.num)}>+</button>
                                </div>
                            </div>
                        </div>
                    })
                }
            </div>
            <div>
                {
                    foodNum == 0 ? 
                    <div className='bottomOneBigBox'>
                        <button className='bottomOneBox'></button>
                        <button className='bottomTwoBox'>未选择商品</button>
                        <button className='bottomThereBox'>去结算</button> 
                    </div>
                    :
                    <div className='bottomTwoBigBox'  onClick={() => setState('bottom')}>
                        <button className='bottomFourBox'></button>
                        <button className='bottomFiveBox'>{foodList.filter(item=>item.num > 0).length}</button>
                        <button className='bottomSixBox'>￥{foodPrice}</button>
                        <button className='bottomSevenBox'>去结算</button>
                        <Popup
                            visible={state === 'bottom'}
                            style={{ height: '30%' }}
                            position='bottom'
                            onClose={onClose}
                        >
                            <div className='shopTopBox'>以点{foodList.filter(item=>item.num > 0).length}份</div>
                            <div className='shopMiddleBox'>
                                <Space className='demo-icon' gap={20}>
                                    <DeleteO  style={{ position:"relative",top:"2px" }} /> 
                                </Space>清空
                            </div>
                            <div className='shopBigBox'>
                                {
                                    foodList.filter(item=>item.num > 0).map((item)=>{
                                        return <div  key={item._id} className='shopBox'>
                                            <div><img src={item.img} width={80} height={80}></img></div>
                                            <div>
                                                <p className='n'>{item.name}</p>
                                                <p className='p'>￥{item.price}</p>
                                                <div className='shopSmallBox'>
                                                    <button onClick={()=>jian(item._id,item.num)}>-</button>
                                                    <button>{item.num}</button>
                                                    <button onClick={()=>jia(item._id,item.num)}>+</button>
                                                </div>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </Popup>
                    </div>
                }
            </div>
        </div>
    )
}